<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <title>循环渲染</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="myapp">
        <h1 v-for="e in list">{{e}}</h1>
        <!-- 插入列表 -->
        <ul>
            <li v-for="peo in people">{{peo.name}} {{peo.age}} </li>
        </ul>
        <!-- 获取索引 从0开始-->
        <ul>
            <li v-for="(peo,index) in people">{{index}}. {{peo.name}} {{peo.age}} </li>
        </ul>
        <!-- 也可以对对象本身进行遍历 在js中对象就是一种特殊的列表-->
        <ul>
            <li v-for="(e,i) in people">{{i}}. <span v-for="(v,k) in e"> {{k}}:{{v}}&MediumSpace; </span> </li>
        </ul>
        <!-- 可以调用函数对数组进行渲染前的处理 -->
        <!-- 但渲染多个元素时,常用的方法还是用template标签包装 -->
        <template v-for="(e,i) in filt(people)">
            <div>{{i+'.'+e.name}}</div>
            <div>{{e.age}}</div>
        </template>
        <!-- 当我们使用v-for循环渲染后其实就将内容跟列表绑定了起来,对列表(数组)增删改,渲染的内容也会随之改变 -->
        <button @click="reverse_all">点击逆序</button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                // 一个数组
                list: [1, 2, 3, 4, 5],
                //对象数组
                people: [
                    { name: "jack", age: 17 },
                    { name: "david", age: 29 },
                    { name: "bob", age: 45 },
                    { name: "lucy", age: 16 },
                ]
            }
        },
        methods: {
            reverse_all() {
                this.people.reverse();
                this.list.reverse();
            },
            filt(l) {
                return l.filter(obj => obj.name != 'jack');
            }
        },
    }
    Vue.createApp(app).mount("#myapp");
</script>